<template>
  <view class="contenter">
    <view class="heads">
      <store-change :item="storeData" :type="1"></store-change>
    </view>
    <indextime :Show="false" :times="form" @time="changeTime"></indextime>
    <view class="swiper-content">
      <view>
        <u-tabs-swiper :current="current" ref="tabs" height="102" inactive-color="#7b7b7b"
                       :list="list" :is-scroll="false" @change="tabsChange"
                       font-size="32" bar-height="10" bar-width="90"
                       :bar-style="{bottom:'16rpx',background:'#45806E',borderRadius: '30rpx'}" :active-item-style="{color:'#000'}"
        ></u-tabs-swiper>
      </view>
      <swiper class="swiper-box"  :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
        <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
            <order-item  v-for="(data, indexTow) in dataList" :type="type"  @aginOrder="aginOrder" @endOder="endOder" @TransferOrder="storeJishi" :key="indexTow" :item="data"  @click.native="order(data)"></order-item>
            <view class="loading_text">
              <text>{{loadingText || '暂无数据'}}</text>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <!--转单选择-->
    <u-picker mode="selector" :title="'请选择转单的人员'" :range="selectorObj" v-model="TransferOrderShow" @confirm="confirm" range-key="name"></u-picker>
    <!--开始服务-->
    <u-popup v-model="show"  closeable mode="bottom" border-radius="14">
      <view class="title u-flex flex_j_c">信息确认</view>
      <view class="con">
        <view class="u-flex">
          用户姓名：{{formData.nickname}}
        </view>
        <view class="u-flex">
          用户电话：{{formData.phone}}
        </view>
        <view class="u-flex">
          预约时间：{{formData.otime}}
        </view>
        <view class="bt" @click="submit">确认</view>
      </view>
    </u-popup>
    <!--结束服务-->
    <modal-item v-if="showModal" ref="child" :item="'确认结束服务'" :titleShow="false" @submit="endSever"  ></modal-item>
    <tabbar :active="0" ></tabbar>
  </view>
</template>

<script>
import Indextime from "../../components/index/indexTime";
import StoreChange from "../../components/item/storeChange";
import OrderItem from "../../components/order/orderItem";
import ModalItem from "../../components/item/modalItem";
import Tabbar from "../../components/tabbar";
import UTabsSwiper from "../../uview-ui/components/u-tabs-swiper/u-tabs-swiper";
export default {
  name: "index",
  components: {UTabsSwiper, Tabbar, ModalItem, OrderItem, StoreChange, Indextime},
  data(){
    return{
      form:{
        start_time:'',
        end_time:'',
      },
      loadingText:'',

      allpage:'',
      page:1,
      tabindex:'',
      dataList:[],
      type:0,//1是技师，2是门店
      height:0,
      list: [{
        name: '全部'
      },{
        name: '待服务'
      }, {
        name: '已服务'
      }, {
        name: '已评价',
      }],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      show:false,
      TransferOrderShow:false,//转单
      showModal:false,//结束服务弹框控制
      serveId:'',//服务id
      storeData: {},//技师门店信息
      formData: {},//订单数据
      //转单列表
      selectorObj: [],
    }
  },
  onLoad(option){
    if(option.type){
      this.current = option.type
      this.swiperCurrent = option.type
    }
    this.type = uni.getStorageSync('type')
    this.NewDay()//请求今日
    this.storeDetail()
  },
  onShow(){
    uni.hideHomeButton();
  },

  methods:{

    //转单技师
    storeJishi(item){
      this.serveId  = item.id
      this.$api.replace({id:item.id}).then(res => {
        this.selectorObj = res.data
        this.TransferOrderShow = true
      })
    },
    //选择时间 一进来就调用了
    changeTime(e){
      this.form.start_time = e.start_time
      this.form.end_time = e.end_time
      this.cacel()
      this.setData() //初始化
    },
    //请求数据
    setData(){
      //服务列表
      let form = {
        type:this.tabindex,
        start_time:this.form.start_time,
        end_time:this.form.end_time,
        limit:10,
        page:this.page || 1
      }
      let that = this
      this.$api.Technician(form).then(res => {
        this.allpage = res.data.last_page
        that.dataList = [...that.dataList,...res.data.data]
      })
    },
    //获取门店信息
    storeDetail(){
      this.$api.getStore().then(res => {
        this.storeData = res.data
        uni.setStorage({
          key: 'store',
          data:  res.data,
          success: function () {
          }
        });
      })
    },
    //开始服务弹框
    aginOrder(item){
      this.formData = item // 订单数据
      this.serveId = item.id
      this.show = true
    },
    //开始服务
    submit(){
      this.$api.AddService({id:this.serveId}).then(res => {
        this.$u.toast('操作成功')
        this.show = false
        this.cacel()
        this.setData()
      })
    },
    // 结束服务弹框
    endOder(item){
      this.serveId = item.id
      this.showModal = true
    },
    // 结束服务
    endSever(){
      this.showModal = false
      this.$api.endService({id:this.serveId}).then(res => {
        this.$u.toast('操作成功')
        this.showModal = false
        this.cacel()
        this.setData()
      })
    },

    //转单确认选择
    confirm(e){
      let form = {
        technician_id:this.selectorObj[e].id,
        id:this.serveId
      }
      this.$api.replaceSave(form).then(res => {
        this.$u.toast('转单成功')
        this.TransferOrderShow = false
        this.cacel()
        this.setData()
      })
    },
    //订单详情
    order(data){
      if(this.type = 1){
        this.$u.route({
          url:'/pagesA/orderDetail/index',
          params: {
            id: data.id
          }
        })
      }

    },
    // tabs通知swiper切换 请求数据
    tabsChange(index) {
      this.swiperCurrent = index;
      if(index != 0){
        this.tabindex = index
      }
      if(index == 0){
        this.tabindex = ''
      }

      this.cacel()
      this.setData()
    },
    //清空数据
    cacel(){
      this.page = 1
      this.dataList = []
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      // this.$refs.tabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.setData()

    }
  }
}
</script>

<style scoped lang="scss">
.head{
  border-top: 2rpx solid $uni-border-color;
  background: white;
}
.heads{
  border-top: 2rpx solid $uni-border-color;
  background: white;
  padding: 20rpx 0;
}
.swiper-content{
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}
.swiper-box {
  flex: 1;
}
.title{
  font-size: 34rpx;
  height: 120rpx;
  border: 2rpx solid #F4F4F4;
  color: #4b4b4b;
}
.con{
  padding: 30rpx 50rpx;
  .u-flex{
    font-size: 32rpx;
    color: #4b4b4b;
    margin-bottom: 40rpx;
  }
  .bt{
    margin: 50rpx 0 ;
  }

}

</style>
